<template>
    <div v-if="pageflag" class="page-warp">
        <div class="box-bar">
            <div class="box" @click="changeChart(0)">
                <div class="mask" :class="{ actived: this.chartType === 0 }"></div>
                元/票
            </div>
            <div class="box" @click="changeChart(1)">
                <div class="mask" :class="{ actived: this.chartType === 1 }"></div>
                元/吨
            </div>
            <div class="box" @click="changeChart(2)">
                <div class="mask" :class="{ actived: this.chartType === 2 }"></div>
                元/方
            </div>
        </div>
        <Echart id="leftCenter" :options="options" isClick class="left_center_inner" ref="charts"
            style="margin-top: -35px;" height="320px" @chartClick="chartClick" />
    </div>
    <Reacquire v-else @onclick="getData" style="line-height: 200px">
        重新获取
    </Reacquire>
</template>

<script>
import { currentPOST } from 'api/modules';
import { colorsA, colorsB, legend, xAxis, yAxis } from '@/config/EChartVar';
import { graphic } from 'echarts';

export default {
    data() {
        return {
            chartType: 0,
            options: {},
            countUserNumData: {
                axisData: ['临沂-上海', '临沂-北京', '临沂-广州', '临沂-济南', '临沂-苏州'],
                seriesData0: [861, 893, 761, 752, 736],
                seriesData1: [128, 121, 116, 115, 120],
                seriesData2: [361, 373, 357, 348, 359],
                seriesData3: [250, 342, 300, 240, 280],
                seriesData4: [240, 302, 200, 230, 240],
            },
            pageflag: true,
            timer: null,
        };
    },
    created() {
        this.getData();
    },
    mounted() { },
    beforeDestroy() {
        this.clearData();
    },
    methods: {
        chartClick(params) {
            this.$emit('chartClick', params);
        },
        changeChart(chartType) {
            this.chartType = chartType;
            // this.options.legend.data[0] = chartType === 0 ? '用电量' : '用水量';
            // this.options.series[0].name = chartType === 0 ? '用电量' : '用水量';
            this.options.series[0].data = this.countUserNumData['seriesData' + chartType];
        },
        clearData() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
        },
        getData() {
            this.pageflag = true;
            this.init(this.countUserNumData);
        },
        //轮询
        switper() {
            if (this.timer) {
                return;
            }
            let looper = (a) => {
                this.getData();
            };
            this.timer = setInterval(
                looper,
                2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
            );
            let myChart = this.$refs.charts.chart;
            myChart.on('mouseover', (params) => {
                this.clearData();
            });
            myChart.on('mouseout', (params) => {
                this.timer = setInterval(
                    looper,
                    2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
                );
            });
        },
        init(currentData) {
            let axisData = currentData.axisData;
            let seriesData = [
                [...currentData.seriesData0],
                [...currentData.seriesData1],
                [...currentData.seriesData2],
                [...currentData.seriesData3],
                [...currentData.seriesData4],
            ];

            const options = {
                grid: {
                    top: '27%',
                    left: '4%',
                    right: '6%',
                    bottom: '16%',
                    containLabel: true,
                },
                legend: {
                    show: false,
                    top: '0px',
                    right: '10%',
                    icon: 'circle',
                    itemWidth: 8,
                    itemHeight: 8,
                    // itemGap: 60,
                    textStyle: legend.textStyle,
                    data: ['用电量'],
                },
                xAxis: {
                    type: 'category',
                    data: axisData,
                    boundaryGap: true,
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false, // 不显示下切线
                    },
                    axisLabel: xAxis.axisLabel,
                    axisLine: {
                        lineStyle: {
                            background: 'rgba(176, 215, 255, 0.4)',
                        },
                    },
                },
                yAxis: [
                    {
                        type: 'value',
                        // max: 400,
                        // min: 100,//
                        // interval: 100,
                        axisLabel: yAxis.axisLabel,
                        axisLine: {
                            show: false,
                            // interval: 1,
                            lineStyle: {
                                color: 'rgba(0,0,0,0.5)',
                            },
                        },
                        splitLine: {
                            show: true,
                            // interval: 1,
                            lineStyle: {
                                color: ['rgba(176, 215, 255, 0.2)'],
                                width: 1,
                                type: 'dashed',
                            },
                        },
                        // splitLine: {
                        //   show: false,
                        // },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [],
            };
            const series = [
                {
                    name: '用电量',
                    type: 'bar',
                    barWidth: 20,
                    // 动画配置
                    animation: true,
                    animationDuration: 2000,
                    animationEasing: 'quarticInOut',
                    animationDelay: function (idx) {
                        return idx * 150;
                    },
                    smooth: true,
                    showSymbol: true,
                    data: seriesData[0],
                    label: {
                        show: true,
                        position: 'top'
                    },
                    itemStyle: {
                        normal: {
                            color: "#5defff",
                            // color: 'rgba(93, 239, 255, .7)',
                            borderRadius: [5, 5, 5, 5]
                        }
                    }
                }
            ];
            options.series = series;
            this.options = options;
        },
    },
};
</script>
<style lang="scss" scoped>
.page-warp {
    position: relative;

    .box-bar {
        position: absolute;
        top: 40px;
        width: 90%;
        display: flex;
        z-index: 999;

        .box {
            width: 80px;
            height: 20px;
            margin-left: 10px;
            // text-align: center;
            font-size: 14px;
            text-indent: 1.6em;
            line-height: 20px;
            cursor: pointer;

            .mask {
                position: absolute;
                width: 80px;
                height: 20px;
                z-index: -1;
                background-color: #141A3A;
                /* 对 div 进行水平倾斜 */
                transform: skewX(-30deg);

                &.actived {
                    background-color: #154FC1;
                }
            }
        }
    }

    #leftCenter {
        z-index: 990;
    }
}
</style>